<template>
<!-- 客房管理——房型统计 -->
<div>
  <div id="KefangEcharts3" :style="{width: widthDiv ,height: heightDiv + 'px'}"></div>
</div>
</template>

<script>
export default {
    data () {
        return {
            widthDiv: '100%',
            xData: [],
            legendData: ['商务A', '商务B', '精品套房', '亲子房', '主题房', '总数'],
            dairuzhuData: [244, 270, 186, 210, 200, 132, 101, 200, 132, 101, 134, 90, 230, 210, 150, 232, 332, 301, 320, 120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210, 150, 232, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 330, 320, 320, 332, 301, 332, 301, 332, 301, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90],
            ruzhuData: [244, 270, 186, 210, 200, 132, 101, 200, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 244, 270, 186, 210, 200, 132, 101, 200, 132, 101, 232, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 330, 210, 150, 232, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154],
            weiruzhuData: [332, 301, 334, 390, 330, 320, 320, 332, 210, 150, 232, 201, 154, 190, 200, 132, 101, 320, 332, 301, 334, 390, 330, 320, 120, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 332, 301, 332, 301, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 332, 301, 332, 301],
            beiquxiaoData: [244, 270, 186, 210, 200, 132, 101, 200, 132, 101, 134, 90, 230, 210, 150, 232, 201, 332, 301, 332, 301, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 134, 90, 210, 200, 132, 101, 134, 90, 230, 230, 210, 150, 232],
            beijujueData: [320, 332, 301, 244, 270, 186, 210, 200, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 200, 132, 101, 134, 330, 320, 120, 132, 101, 134, 90, 230, 210, 150, 330, 320, 320, 332, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210, 150, 232, 201, 154, 190, 330, 410, 320, 332, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 410, 120, 132],
            zongshuData: [820, 932, 934, 1000, 1130, 897, 901, 930, 897, 901, 901, 1142, 1190, 1101, 1034, 948, 890, 902, 932, 934, 1090, 1148, 1200, 1280, 1190, 1148, 1100, 951, 1004, 1029, 934, 1104, 930, 897, 1209, 934, 1104, 1130, 1204, 1029, 934, 1104, 930, 897, 901, 930, 897, 901, 1130, 1204, 1029, 934, 1104, 930, 897, 901, 934, 1104, 930, 897, 901, 1200, 1290, 1234, 1290, 1148, 1100, 1001, 1148, 1130, 1204, 1029, 1204, 1029, 934, 1104, 930, 897, 901, 1200, 934, 1104, 930, 897, 901, 1200, 1029, 934, 1104, 930, 897, 901, 934, 1104]
        }
    },
    props: ['heightDiv'],
    computed: {},
    mounted () {
        var date = []
        for (var i = 1; i < 31; i++) {
            if (i < 10) {
                i = '0' + i
            }
            date.push('04-' + i)
        }
        for (var j = 1; j < 32; j++) {
            if (j < 10) {
                j = '0' + j
            }
            date.push('05-' + j)
        }
        for (var f = 1; f < 31; f++) {
            if (j < 10) {
                f = '0' + f
            }
            date.push('06-' + f)
        }
        this.xData = date
        this.drawLine()
        const that = this
        window.addEventListener('resize', function () {
            // 浏览器大小改变时canvas重绘
            that.KefangEcharts3.resize()
        })
    },
    methods: {
        drawLine () {
            // 基于准备好的dom，初始化echarts实例
            this.KefangEcharts3 = this.$echarts.init(
                document.getElementById('KefangEcharts3')
            )
            // 绘制图表
            this.KefangEcharts3.setOption({
                backgroundColor: 'rgba(128, 128, 128, 0)',
                // toolbox: {
                //     feature: {
                //         saveAsImage: {} // 保存为图片
                //     }
                // },
                title: {
                    text: '每日订单数金额统计',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    textStyle: {
                        color: '#064C9F'
                    },
                    data: this.legendData
                },
                grid: {
                    left: '10',
                    right: '45',
                    top: '35',
                    bottom: '30',
                    containLabel: true
                },
                xAxis: {
                    name: '日期',
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { // 坐标轴轴线相关设置
                        lineStyle: {
                            color: '#b0bfd0'
                        }
                    },
                    axisLabel: { // 坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#b0bfd0'
                        }
                    },
                    data: this.xData
                },
                yAxis: {
                    name: '金额',
                    type: 'value',
                    axisLine: { // 坐标轴轴线相关设置
                        lineStyle: {
                            color: '#b0bfd0'
                        }
                    },
                    axisLabel: { // 坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#b0bfd0'
                        }
                    }
                },
                series: [
                    {
                        name: '商务A',
                        type: 'line',
                        lineStyle: {
                            normal: {color: '#7CB5EC'}
                        },
                        data: this.dairuzhuData
                    },
                    {
                        name: '商务B',
                        type: 'line',
                        lineStyle: {
                            normal: {color: '#434348'}
                        },
                        data: this.ruzhuData
                    },
                    {
                        name: '精品套房',
                        type: 'line',
                        stack: '总量',
                        lineStyle: {
                            normal: {color: '#90ED7D'}
                        },
                        data: this.weiruzhuData
                    },
                    {
                        name: '亲子房',
                        type: 'line',
                        lineStyle: {
                            normal: {color: '#F7A561'}
                        },
                        data: this.beiquxiaoData
                    },
                    {
                        name: '主题房',
                        type: 'line',
                        lineStyle: {
                            normal: {color: '#8085E9'}
                        },
                        data: this.beijujueData
                    },
                    {
                        name: '总数',
                        type: 'line',

                        lineStyle: {
                            normal: {color: '#F15C80'}
                        },
                        data: this.zongshuData
                    }
                ]
            })
        }
    }
}
</script>

<style>

</style>
